<template>
  <div class="question-table-container">
    <!-- 查询表单区域 -->
    <el-form :inline="true" :model="searchForm" class="search-form mb-4">
      <el-form-item label="题目ID">
        <el-input v-model="searchForm.questionId" placeholder="请输入题目ID"></el-input>
      </el-form-item>
      <el-form-item label="题目内容">
        <el-input v-model="searchForm.content" placeholder="请输入题目内容"></el-input>
      </el-form-item>
      <el-form-item label="年级">
        <el-select v-model="searchForm.grade" placeholder="年级">
          <el-option label="年级" value="年级"></el-option>
          <!-- 可扩展更多年级选项 -->
        </el-select>
      </el-form-item>
      <el-form-item label="学科">
        <el-select v-model="searchForm.subject" placeholder="请选择">
          <el-option label="请选择" value="请选择"></el-option>
          <el-option label="数学" value="数学"></el-option>
          <el-option label="语文" value="语文"></el-option>
          <!-- 可扩展更多学科选项 -->
        </el-select>
      </el-form-item>
      <el-form-item label="题型">
        <el-select v-model="searchForm.type" placeholder="请选择">
          <el-option label="请选择" value="请选择"></el-option>
          <el-option label="单选题" value="单选题"></el-option>
          <el-option label="简答题" value="简答题"></el-option>
          <el-option label="填空题" value="填空题"></el-option>
          <el-option label="判断题" value="判断题"></el-option>
          <el-option label="多选题" value="多选题"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button type="primary" class="ml-2" @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <!-- 题目表格区域 -->
    <el-table :data="tableData" border style="width: 100%" class="mb-4">
      <el-table-column prop="id" label="Id"></el-table-column>
      <el-table-column prop="subject" label="学科"></el-table-column>
      <el-table-column prop="type" label="题型"></el-table-column>
      <el-table-column prop="stem" label="题干"></el-table-column>
      <el-table-column prop="score" label="分数"></el-table-column>
      <el-table-column prop="difficulty" label="难度"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="handlePreview(scope.row)">预览</el-button>
          <el-button type="primary" size="mini" class="ml-2" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" class="ml-3" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="flex justify-end"
    />
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
// 按需引入 Element Plus 组件
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton, ElTable, ElTableColumn, ElPagination } from 'element-plus'

// 搜索表单数据
const searchForm = reactive({
  questionId: '',
  content: '',
  grade: '年级',
  subject: '请选择',
  type: '请选择'
})

// 表格数据（模拟，实际可从接口获取）
const tableData = ref([
  { id: 13, subject: '数学（高三）', type: '单选题', stem: 'cccccccccc', score: 10, difficulty: 5, createTime: '2022-12-15 08:17:24' },
  { id: 12, subject: '数学（高三）', type: '单选题', stem: 'bbbbb', score: 10, difficulty: 5, createTime: '2022-12-15 08:16:30' },
  { id: 11, subject: '数学（高三）', type: '单选题', stem: 'aaaaa', score: 10, difficulty: 5, createTime: '2022-12-15 08:14:40' },
  { id: 10, subject: '语文（高三）', type: '简答题', stem: '00000000000000', score: 10, difficulty: 5, createTime: '2022-12-15 06:58:59' },
  { id: 9, subject: '语文（高三）', type: '简答题', stem: '99999999999999', score: 10, difficulty: 5, createTime: '2022-12-15 06:58:34' },
  { id: 8, subject: '语文（高三）', type: '填空题', stem: '8888888881', score: 10, difficulty: 5, createTime: '2022-12-15 06:58:04' },
  { id: 7, subject: '语文（高三）', type: '填空题', stem: '77777777777771', score: 10, difficulty: 5, createTime: '2022-12-15 06:57:32' },
  { id: 6, subject: '语文（高三）', type: '判断题', stem: '66666666666666', score: 10, difficulty: 5, createTime: '2022-12-15 06:44:36' },
  { id: 5, subject: '语文（高三）', type: '判断题', stem: '5555555555', score: 10, difficulty: 5, createTime: '2022-12-15 06:44:16' },
  { id: 4, subject: '语文（高三）', type: '多选题', stem: '4444444444', score: 10, difficulty: 5, createTime: '2022-12-15 06:42:10' }
])

// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(13)

// 查询事件
const handleSearch = () => {
  console.log('查询条件：', searchForm)
  // 实际可调用接口，根据 searchForm 传参获取表格数据，更新 tableData、total 等
}

// 添加事件
const handleAdd = () => {
  console.log('点击添加')
  // 可跳转添加页面或弹出添加弹窗
}

// 预览事件
const handlePreview = (row) => {
  console.log('预览题目数据：', row)
  // 可实现预览逻辑，如打开新窗口展示题目详情
}

// 编辑事件
const handleEdit = (row) => {
  console.log('编辑题目数据：', row)
  // 可跳转编辑页面或弹出编辑弹窗，携带 row 数据
}

// 删除事件
const handleDelete = (row) => {
  console.log('删除题目数据：', row)
  // 可调用接口删除，再更新 tableData
}

// 每页条数改变事件
const handleSizeChange = (val) => {
  pageSize.value = val
  // 调用接口重新获取数据，更新 tableData
}

// 当前页改变事件
const handleCurrentChange = (val) => {
  currentPage.value = val
  // 调用接口重新获取数据，更新 tableData
}
</script>

<style scoped>
.question-table-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.search-form {
  display: flex;
  align-items: center;
}

.mb-4 {
  margin-bottom: 16px;
}

.flex {
  display: flex;
}

.justify-end {
  justify-content: flex-end;
}
</style>